<template>
  <div class="step-container">
    <div class="step-title">4.添加会员</div>
    <div class="step-content">
      <Row style="font-size: 15px;">
        <Col span="4">
          <a :href="downloadUrl"><Button type="primary" icon="">下载导入模板</Button></a>
        </Col>
        <Col span="4">
          <Upload
                :action="SERVER_HOST + 'busine/theme/member/memberImport/?orgId=' + baseuser.orgId + '&themeId=' + themeId"
                :show-upload-list="false"
                :on-success="uploadSuccess">
          <Button type="primary" icon="ios-cloud-upload">导入会员</Button></Upload>
        </Col>
        <Col span="4">
          <span @click="addMember">
            <Button type="primary" icon="ios-add">新增会员</Button>
          </span>
        </Col>
        <Col span="4">
          <span @click="deleteByIds">
            <Button type="error" icon="ios-remove">批量删除</Button>
          </span>
        </Col>
      </Row>
      <div class="main-table">
        <Table border :columns="columns" :data="data" height="400" size="small"></Table>
      </div>
      <div class="pagination">
        <Page
          :total="total"
          size="small"
          :page-size="pageSize"
          :current.sync="pageIndex"
          @on-change="loadList"
          show-total
          show-elevator
        ></Page>
      </div>
      <Modal
        v-model="editModal"
        title="新增会员"
        width="40%"
        :mask-closable="false"
        @on-cancel="editModal = false"
        :transfer="false"
      >
        <Form ref="formData" :model="formData" :label-width="100" :rules="ruleInline">
          <FormItem label="会员名称" prop="realname">
            <Input v-model="formData.realname" clearable></Input>
          </FormItem>
          <FormItem label="联系电话" prop="phone">
            <Input v-model="formData.phone" clearable></Input>
          </FormItem>
          <FormItem label="性别">
            <Select v-model="formData.sex" clearable style="width: 100%">
              <Option :value="1">男</Option>
              <Option :value="2">女</Option>
            </Select>
          </FormItem>
          <FormItem label="年龄">
            <InputNumber v-model="formData.age" :min="0" :precision="0" style="width: 100%"></InputNumber>
          </FormItem>
          <FormItem label="学校/所在单位" prop="school">
            <Input v-model="formData.school" clearable></Input>
          </FormItem>
          <FormItem label="奖项" prop="diplomasId">
            <Select v-model="formData.diplomasId" clearable>
              <Option v-for="item in dipList" :value="item.id" :key="item.id">{{item.name}}</Option>
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="primary" @click="saveMember('formData')">保存</Button>
          <Button type="ghost" style="margin-left: 8px" @click="closeModel('formData')">取消</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script src="./memberSetting.js"></script>
<style lang="less" src="./memberSetting.less"></style>